<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">
	<title>珠峰培训 - 微信：18310612838</title>
	<!-- IMPORT CSS -->
	<link rel="stylesheet" href="css/reset.min.css">
	<link rel="stylesheet" href="css/banner.css">
</head>

<body>
	<div id="app">
		<banner :focus="focus" :button="button" :data="bannerList" :interval="2000" :init="init" :transitioned="transitioned"
		:speed="1000"
		:index="0"
		v-if="bannerList.length"
		></banner>
	</div>
	



	<!-- IMPORT JS -->
	<script src="js/vue.js"></script>
	<script src="js/axios.min.js"></script>
	<script src="js/axios.defaults.js"></script>
	<script src="js/banner-plugin.js"></script>
	<script>

		let vm = new Vue({
			el: '#app',
			data:{
				focus:true,
				button:true,
				bannerList:[]
			},
			components:{
				banner
			},
			created(){
				this.getBanner()
			},
			methods:{
				init(vm){
					// 这是轮播图组件初始化完成的时候执行的钩子函数
					console.log(vm);
				},
				transitioned(vm){
					console.log(vm.activeIndex);
					// 这是足轮播图组件妹轮播完成一张图片执行的钩子函数
				},
				getBanner(){
					// 在这里发送ajax请求
					// console.log(222);
					axios.get('/banner').then(res=>{
						if(parseFloat(res.code) === 0 ){
							this.bannerList = res.data
						}
					})
				}
			}
		});
	</script>
</body>

</html>